<template>
    <div class="canvas" ref="canvas"></div>
</template>

<script setup>
import { ref, onMounted, nextTick} from 'vue';
import * as echarts from 'echarts';
const canvas = ref(null) // dom实例
let myChart = ref({}) // echarts实例
onMounted(() => {
    renderChart()
})

const renderChart = () => {
    myChart.value = echarts.init(canvas.value)
    myChart.value.setOption({
        color: ['#75A2F3'],
        tooltip: {
            trigger: 'item',
        },
        grid: {
            left: '0%',
            right: '5%',
            bottom: '0%',
            top: '0%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        ],
        yAxis: [
            {
                show: false,
                type: 'value'
            }
        ],
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
            }
        ]
    });
}
window.addEventListener('resize', myChart.value.resize)
</script>

<style scoped>
.canvas {
    width: 100%;
    height: 17.64rem;
}
</style>